<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
       
        父元素：
        1.开启弹性布局
        display:flex（弹性）
        justify-content:（整理内容）
        flex-statr || flex-end ||center || space-around(两边有间距)||space-between(两边没有距离)
        flex-wrap:wrap 换行
        flex-direction:column 换成垂直方向
        默认flex-direction:row 水平方向
        设置侧轴对齐方向
        align-items:flex-start || center || flex-end
        子元素
         flex-grow || flex-shrink
         flex:1 这个占父盒子剩余空间
         align-self:flex-start || center || flex-end//垂直方向对齐
         justify-content 左中左
         align-items 上中上
</body>
</html>